<template>
  <!-- 系统设置页面 - 用户权限管理 -->

  <!-- 查询条件区域 -->
  <el-card>
    <el-row :gutter="8">
      <!-- 姓名查询输入框 -->
      <el-col :span="6">
        <el-input v-model.trim="searchParams.name" placeholder="请输入姓名" />
      </el-col>

      <!-- 部门选择下拉框 -->
      <el-col :span="6">
        <el-select placeholder="请选择部门" v-model="searchParams.department">
          <el-option label="全部" value="" />
          <el-option label="总裁办" value="总裁办" />
          <el-option label="技术部" value="技术部" />
          <el-option label="市场部" value="市场部" />
          <el-option label="维修部" value="维修部" />
          <el-option label="运营部" value="运营部" />
          <el-option label="客服部" value="客服部" />
        </el-select>
      </el-col>

      <!-- 查询操作按钮区域 -->
      <el-col :span="6">
        <el-button type="primary" @click="loadData"> 查询 </el-button>
        <el-button @click="resetSearch"> 重置 </el-button>
      </el-col>
    </el-row>
  </el-card>

  <!-- 用户数据表格区域 -->
  <el-card class="mt">
    <!-- 用户信息表格 -->
    <el-table :data="dataList" v-loading="loading">
      <!-- 序号列 -->
      <el-table-column type="index" label="序号" width="80" />

      <!-- 账号信息列 -->
      <el-table-column prop="account" label="账号" />

      <!-- 姓名信息列 -->
      <el-table-column prop="name" label="姓名" />

      <!-- 电话信息列 -->
      <el-table-column prop="phone" label="电话" />

      <!-- 身份证号信息列 -->
      <el-table-column prop="idNo" label="身份证号" />

      <!-- 职位信息列 - 使用标签样式显示 -->
      <el-table-column prop="position" label="职位">
        <template #default="scope">
          <el-tag type="primary">
            {{ scope.row.position }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 部门信息列 -->
      <el-table-column prop="department" label="部门" />

      <!-- 页面权限信息列 - 使用标签样式显示 -->
      <el-table-column prop="pageAuthority" label="页面权限">
        <template #default="scope">
          <el-tag type="success">
            {{ scope.row.pageAuthority }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 按钮权限信息列 - 使用标签样式显示 -->
      <el-table-column prop="btnAuthority" label="按钮权限">
        <template #default="scope">
          <el-tag type="info">
            {{ scope.row.btnAuthority }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 操作按钮列 -->
      <el-table-column prop="opera" label="操作" width="280">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="settingAuth(scope.row.pageAuthority, scope.row.account)"
          >
            权限设置
          </el-button>
          <el-button type="danger" size="small"> 删除 </el-button>
          <el-button type="danger" size="small"> 禁用 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="mt mb fr"
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 权限设置弹窗组件 -->
  <AuthModal
    :visible="visible"
    :checked-keys="checkedKeys"
    :btnAuth="btnAuth"
    :accountNo="accountNo"
    @reload="loadData"
    @close="visible = false"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";

/**
 * 查询参数类型定义
 */
interface searchType {
  name: string; // 姓名查询条件
  department: string; // 部门查询条件
}

/**
 * 查询参数响应式对象
 */
const searchParams = ref<searchType>({
  name: "",
  department: "",
});

// ================= 表格数据管理逻辑 =======================

import { useHttp } from "@/hokes/useHttp";

/**
 * 使用自定义HTTP Hook获取表格数据
 * 参数1: API接口地址
 * 参数2: 搜索参数
 */
const {
  dataList, // 用户数据列表
  loading, // 加载状态
  totals, // 数据总数
  pageInfo, // 分页信息
  loadData, // 加载数据方法
  handleCurrentChange, // 页码变更处理方法
  handleSizeChange, // 每页数量变更处理方法
  resetPagination, // 重置分页信息方法
} = useHttp("/permission/permissionList", searchParams);

// ================= 搜索重置逻辑 =======================

/**
 * 重置搜索条件和分页信息
 */
const resetSearch = () => {
  // 清空搜索条件
  searchParams.value = {
    name: "",
    department: "",
  };
  // 重置分页信息到第一页
  resetPagination();
  // 重新加载数据
  loadData();
};

// ================= 权限设置弹窗逻辑 =======================

import AuthModal from "./AuthModal.vue";

/**
 * 控制权限设置弹窗显示状态
 */
const visible = ref<boolean>(false);

import { getUserAuth } from "@/api/system";

/**
 * 选中的权限Key数组 - 存储当前用户权限的所有URL
 */
const checkedKeys = ref<string[]>([]);

/**
 * 按钮权限数组
 */
const btnAuth = ref<string[]>([]);

/**
 * 当前操作用户账号
 */
const accountNo = ref<string>("");

/**
 * 权限设置功能
 * 获取用户权限数据并打开设置弹窗
 * @param pageAuthority - 页面权限标识
 * @param account - 用户账号
 */
const settingAuth = async (pageAuthority: string, account: string) => {
  // 调用接口获取用户权限数据
  const {
    data: { list, btn },
  } = await getUserAuth(pageAuthority);

  /**
   * 递归获取所有权限URL
   * @param list - 权限列表
   * @returns 权限URL数组
   */
  const getUrls = (list: any[]): string[] => {
    let urls: string[] = [];
    list.forEach((item) => {
      urls.push(item.url);
      // 递归处理子节点权限
      if (item.children && item.children.length > 0) {
        urls = urls.concat(getUrls(item.children));
      }
    });
    return urls;
  };

  // 更新选中的权限Key
  checkedKeys.value = getUrls(list);
  // 更新按钮权限数据
  btnAuth.value = btn;
  // 更新当前操作用户账号
  accountNo.value = account;

  // 显示权限设置弹窗
  visible.value = true;
};
</script>

<style scoped>
/* 系统设置页面样式 */
/* 当前无自定义样式，使用Element UI默认样式 */
</style>
